<template>
	<view class="pageview">
		<cl-navbar autoBack placeholder  :title="$t('friendChatDetails.title')"></cl-navbar>
		<view class="pageContent">
			<view class="topInfo">
				<view class="topInfo__view">
					<cl-avatar :src="chatInfo.avatar_url" size="140rpx" preview></cl-avatar>
					<view class="topInfo__view__item">
						<view style="display: flex;align-items: center;">
							<image src="/static/icon/nan.svg" style="width: 35rpx;height: 35rpx;margin-right: 10rpx;" v-if="friendInfo.sex == '男'"/>
							<image src="/static/icon/nv.svg" style="width: 35rpx;height: 35rpx;margin-right: 10rpx;" v-else-if="friendInfo.sex == '女'"/>
							<text class="topInfo__view__item__nickname u-line-1">{{chatInfo.nickname}}</text>
							<text v-if="chatInfo && chatInfo.user_type && chatInfo.user_type > 0 && chatInfo.user_type != 6 && chatInfo.user_type != 8" class="typetag" style="background-color: #02D478;">{{$t('common.friend.authority')}}</text>
						</view>
						<view style="display: flex;align-items: center;margin-top: 10rpx;" @click.stop="copy">
							<text class="topInfo__view__item__number">{{$t('my.index.account')}}：{{friendInfo.user_no}}</text>
							<u-icon name="file-text" size="15px"></u-icon>
						</view>
					</view>
				</view>
				<view class="topInfo__signature">
					{{$t("addressbook.friend_details.signature")}}：<span style="color: #ffffff;">{{friendInfo.sign_remark || $t("my.index.noSignature")}}</span>
				</view>
			</view>
			<view class="cellviewGrop">
				<view class="cellview" @click="setBeizhu">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t("addressbook.friend_edit_details.setRemarks")}}</text>
					</view>
					<view class="cellview__right">
						<text class="cellview__right__content u-line-1">{{friendInfo.friend_remark}}</text>
						<u-icon name="arrow-right" color="#ffffff"></u-icon>
					</view>
				</view>
			</view>
			<view class="cellviewGrop">
				<view class="cellview" @click="tuijian">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t("addressbook.friend_edit_details.Recommended")}}</text>
					</view>
					<view class="cellview__right">
						<u-icon name="arrow-right" color="#ffffff"></u-icon>
					</view>
				</view>
			</view>
			<view class="cellviewGrop">
				<view class="cellview" @click="fenGroup">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t("addressbook.friend_edit_details.group")}}</text>
					</view>
					<view class="cellview__right">
						<text class="cellview__right__content u-line-1">{{friendInfo.friend_group_name}}</text>
						<u-icon name="arrow-right" color="#ffffff"></u-icon>
					</view>
				</view>
			</view>
			<view class="cellviewGrop">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t("friendChatDetails.MsgNotDisturb")}}</text>
					</view>
					<view class="cellview__right">
						<u-switch v-model="friendInfo.disturbing" @change="e=>setChange('disturbing',e)" size="20" :activeValue="1" :inactiveValue="0" inactiveColor="#121325" activeColor="#121325"></u-switch>
					</view>
				</view>
			</view>
			<view class="cellviewGrop">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t("addressbook.friend_edit_details.addBlack")}}</text>
					</view>
					<view class="cellview__right">
						<u-switch v-model="friendInfo.is_black" asyncChange @change="e=>setChange('black',e)" size="20" :activeValue="true" :inactiveValue="false" inactiveColor="#121325" activeColor="#121325"></u-switch>
					</view>
				</view>
			</view>
			<view class="cellviewGrop">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t("friendChatDetails.topChat")}}</text>
					</view>
					<view class="cellview__right">
						<u-switch v-model="friendInfo.is_top" @change="e=>setChange('pinned',e)" size="20" :activeValue="1" :inactiveValue="0" inactiveColor="#121325" activeColor="#121325"></u-switch>
					</view>
				</view>
			</view>
			<view class="cellviewGrop" @click="gopage('chat_history')">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t("friendChatDetails.searchChatHistory")}}</text>
					</view>
					<view class="cellview__right">
						<text class="cellview__right__content u-line-1">{{$t("friendChatDetails.searchChatHistoryType")}}</text>
						<u-icon name="arrow-right" color="#ffffff"></u-icon>
					</view>
				</view>
			</view>
			<view class="cellviewGrop" @click="gopage('report')">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t("friendChatDetails.report")}}</text>
					</view>
					<view class="cellview__right">
						<u-icon name="arrow-right" color="#ffffff"></u-icon>
					</view>
				</view>
			</view>
			<!-- <view class="cellviewGrop" @click="clearchat">
				<view class="cellview">
					<view class="cellview__left">
						<text class="cellview__left__title">{{$t("my_file.setting.index.clearChatHistory")}}</text>
					</view>
				</view>
			</view> -->
			<view class="controlsBotton" @click="clearchat">
				<text class="cellview__left__title" style="color: #61afef;">{{$t("my_file.setting.index.clearChatHistory")}}</text>
			</view>
		</view>
		<view>
			<cl-model ref="clmodel"></cl-model>
			<cl-edit-pop ref="clEditPop" :title="$t('addressbook.friend_edit_details.setRemarks')" @complete="complete">
				<view style="padding:30rpx;">
					<u-input
						:customStyle="{backgroundColor:'#1E1F30',height:'110rpx',padding:'0 30rpx',borderRadius: '20rpx'}"
						fontSize="28rpx"
						color="#ffffff"
						:adjustPosition="false"
						v-model="setData.friend_nickname"
						border="none"
						focus
					  ></u-input>
				</view>
			</cl-edit-pop>
		</view>
	</view>
</template>

<script>
	import friendSqlite from '@/sqlite_services/friend.js'
	import friendsBlackSqlite from '@/sqlite_services/friendsBlack.js'
	import seesionSqlite from '@/sqlite_services/seesion.js'
	import msgSqlite from '@/sqlite_services/msg.js'
	import friendsBlackApi from "@/services/api/friendsBlack.js"
	import friendsApi from "@/services/api/friends.js"
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'friendChatDetails',
		data() {
			return {
				value:false,
				setData:{
					friend_id:0,
					friend_nickname:''
				}
			}
		},
		computed: {
			...mapState({
				chatInfo: state => state.chat.chatInfo,
				friendInfo: state => state.friends.friendInfo
			}),
		},
		onLoad() {
			console.log(this.chatInfo);
			let {user_id} = this.$Route.query
			this.$store.commit('setFriendInfo',{
				user_id:user_id,
				is_top:0,
				disturbing:0
			})
			this.getInfo()
		},
		onUnload() {
			this.$store.commit('setFriendInfo',{})
		},
		methods: {
			copy(){
				// let data = JSON.parse(JSON.stringify(this.friendInfo))
				// this.$Router.push({
				// 	name: 'chatMsg',
				// 	params: {
				// 		friend_idx:data.user_id,
				// 		nick_name:data.friend_remark || data.nick_name,
				// 		avatar_url:data.avatar_url,
				// 		user_type:data.user_type
				// 	}
				// });
				// return
				uni.setClipboardData({
					data: this.friendInfo.user_no,
					showToast:false,
					success: () => {
						uni.showToast({
							icon:'none',
							title:this.$t("tost.title.copyOk")
						})
					}
				});
			},
			async getInfo(){
				//获取置顶
				try{
					let Sesstion = await seesionSqlite.getSesstionId(this.friendInfo.user_id,'is_top')
					if(Sesstion){
						this.$store.commit('updateFriendInfo',{
							is_top:Sesstion.is_top,
							user_id:this.friendInfo.user_id,
						})
					}else{
						this.$store.commit('updateFriendInfo',{
							is_top:0,
							user_id:this.friendInfo.user_id,
						})
					}
				}catch(e){
					this.$store.commit('updateFriendInfo',{
						is_top:0,
						user_id:this.friendInfo.user_id,
					})
				}
				//获取用户信息
				try{
					let res = await friendSqlite.getUserInfo(this.friendInfo.user_id)
					if(res) this.$store.commit('updateFriendInfo',res)
				}catch(e){
					console.log(e);
				}
				//查黑名单
				try{
					let res = await friendsBlackSqlite.getBlackInfo(this.friendInfo.user_id)
					if (res) {
						this.$store.commit('updateFriendInfo',{
							is_black:true,
							user_id:this.setData.friend_id,
						})
					}else{
						this.$store.commit('updateFriendInfo',{
							is_black:false,
							user_id:this.setData.friend_id,
						})
					}
				}catch(e){
					console.log(e);
				}
				//接口获取用户信息
				try{
					let res = await friendsApi.getFriendInfo(this.friendInfo.user_id)
					console.log(res)
					if(res)this.$store.commit('updateFriendInfo',res)
				}catch(e){}
				console.log(this.friendInfo);
			},
			gopage(name){
				this.$Router.push({
					name
				});
			},
			clearchat(){
				this.$refs.clmodel.show({
					title: this.$t("my_file.setting.index.clearChatHistory"),
					content: this.$t("chat.msg.feature.chatHistory"),
					confirm: (e) => {
						e.showModel = false
						msgSqlite.clearChatHistory(this.friendInfo.user_id,'private')
					}
				})
			},
			fenGroup(){
				this.$Router.push({
					name: 'friend_group_manage',
					params: {
						type: 'editFriend',
						friend_id:this.friendInfo.user_id
					}
				});
			},
			//设置备注
			setBeizhu(){
				console.log(this.friendInfo);
				let {friend_remark,user_id,nick_name} = this.friendInfo
				this.setData = {
					friend_nickname:friend_remark,
					friend_id:user_id,
					nickname:nick_name
				}
				this.$refs.clEditPop.show()
			},
			//设置备注
			async complete(){
				try{
					let resapi = await friendsApi.editNickname(this.setData)
					if(resapi){
						this.$store.commit('updateFriendInfo',{
							friend_remark:this.setData.friend_nickname,
							user_id:this.setData.friend_id,
						})
						this.$refs.clEditPop.cancel()
					}
				}catch(e){
					//TODO handle the exception
				}
			},
			tuijian(){
				this.$Router.push({
					name: 'business_share',
					params: {
						type: 'friend_card',
						infodata: this.friendInfo
					}
				});
			},
			async setChange(type,val){
				switch (type){
					case 'black':
						if(!val){
							try{
								let resapi = await friendsBlackApi.undock(this.friendInfo.user_id)
								if(resapi){
									this.$store.commit('updateFriendInfo',{
										is_black:false,
										user_id:this.friendInfo.user_id,
									})
								}
							}catch(e){}
						}else{
							try{
								let resapi = await friendsBlackApi.black(this.friendInfo.user_id)
								if(resapi){
									this.$store.commit('updateFriendInfo',{
										is_black:true,
										user_id:this.friendInfo.user_id,
									})
								}
							}catch(e){}
						}
						break;
					case 'disturbing':
						//这里需要更新用户表和会话表
						let data = {
							disturbing: val,
						}
						this.$store.dispatch('updateSession',{
							chat_id: this.friendInfo.user_id,
							data 
						})
						friendSqlite.editUserInfo(this.friendInfo.user_id,data)
						break;
					case 'pinned':
						//这里只需要更新会话表
						this.$store.dispatch('updateSession',{
							chat_id: this.friendInfo.user_id,
							data: {
								is_top: val,
							}
						})
						break;
					default:
						break;
				}
			}
		},
	};
</script>

<style scoped lang="scss">
	.typetag{
		white-space: nowrap;
		font-size: 20rpx;
		color: #FFFFFF;
		padding: 0 10rpx;
		height: 28rpx;
		margin-left: 10rpx;
		line-height: 28rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: #FF7676;
	}
	.topInfo{
		padding: 30rpx;
		&__view{
			display: flex;
			align-items: center;
			gap: 30rpx;
			&__item{
				display: flex;
				flex-direction: column;
				&__nickname{
					font-size: 32rpx;
					color: #FFFFFF;
				}
				&__number{
					font-size: 24rpx;
					color: #61626E;
				}
			}
		}
		&__signature{
			margin-top: 40rpx;
			font-size: 28rpx;
			color: #61626E;
			word-break: break-all;
		}
	}
	.cellviewGrop {
		background: #1E1F30;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 0;
	
		.cellview {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 110rpx;
	
			&__left {
				display: flex;
				align-items: center;
	
	
				&__title {
					white-space: nowrap;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
			&__right{
				display: flex;
				align-items: center;
				margin-left: 50rpx;
				&__content{
					font-size: 28rpx;
					color: #61626e;
				}
			}
		}
	}
	.controlsBotton{
		height: 110rpx;
		text-align: center;
		line-height: 110rpx;
		background: #1E1F30;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 20rpx;
		font-size: 32rpx;
		color: #FF5252;
	}
</style>